import React from 'react';
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Space, Tag } from 'antd';
import './index.less';
export default (props) => {
  const { sortType, sortValue, onChange, list = [], showFlag = true } = props;
  return (
    <Space size={'small'}>
      {list.map((item, index) => {
        const { label, value } = item;
        return (
          <Tag
            key={index}
            onClick={() => {
              onChange(value);
            }}
            className={value === sortType ? 'SelectNav_select' : 'SelectNav_noSelect'}
          >
            <Space>
              <div> {label}</div>

              <span style={{ marginLeft: 8, display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
                <UpOutlined
                  style={{
                    color: value === sortType && sortValue === 'asc' ? '#1890ff' : '#999999',
                    display: 'block',
                    fontSize: 8,
                  }}
                ></UpOutlined>
                <DownOutlined
                  style={{
                    fontSize: 8,
                    display: 'block',
                    color: value === sortType && sortValue === 'desc' ? '#1890ff' : '#999999',
                  }}
                ></DownOutlined>
              </span>
            </Space>

          </Tag>
        );
      })}
      {showFlag && <Tag
        onClick={() => {
          onChange('');
        }}
        className={'SelectNav_noSelect'}
      >
        最新
      </Tag>}
    </Space>
  );
};
